<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<base href="http://localhost:8080/vote/" />
<link rel="stylesheet" href="layui/css/layui.css">
<link rel="stylesheet" href="admin/view.css" />
<link rel="icon" href="/favicon.ico">
<title>投票系统后台管理</title>
</head>
<body class="layui-view-body">
	<div class="layui-content">
		<div class="layui-page-header">
			<div class="pagewrap">
				<h2 class="title">用户组</h2>
			</div>
		</div>
		<div class="layui-row">
			<div class="layui-card">
				<div class="layui-card-body">
					<div class="form-box">
						<div class="layui-form layui-form-item">
							<div class="layui-inline">
								<div class="layui-form-mid">用户名:</div>
								<div class="layui-input-inline" style="width: 100px;">
									<input type="text" autocomplete="off" class="layui-input" id="account"/>
								</div>
								<div class="layui-form-mid">性别:</div>
								<div class="layui-input-inline" style="width: 100px;">
									<select name="sex" id="sex">
										<option value="" checked>请选择</option>
										<option value="0">男</option>
										<option value="1">女</option>
									</select>
								</div>
								<button class="layui-btn layui-btn-blue" id="query">查询</button>
								<button class="layui-btn layui-btn-primary" id="reset">重置</button>
							</div>
						</div>
						<button class="layui-btn layui-btn-blue" id="add">
							<i class="layui-icon">&#xe654;</i>新增
						</button>
						<table id="table" lay-filter="tableTool"></table>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 	弹出框 -->
	<div id="content_update" style="display: none">
		<form id="updateuser">
			<table id="data_update" class="editorTable"
				style="margin: auto; margin-top: 50px; width: 80%;">
				<tr class="layui-form-item">
					<th class="layui-form-label">ID</th>
					<td><input type="text"  id="uid" name="uid" class="layui-input-inline" readonly="readonly" style="color: gray"/></td>
				</tr>
				<tr class="layui-form-item">
					<th class="layui-form-label">用户名</th>
					<td><input type="text"  id="userloginname" name="userloginname" class="layui-input-inline"/></td>
				</tr>
				<tr class="layui-form-item">
					<th class="layui-form-label">姓名</th>
					<td><input type="text" id="username" name="username"
						class="layui-input-inline" /></td>
				</tr>
				<tr class="layui-form-item">
					<th class="layui-form-label">性别</th>
					<td><input type="radio" name="usersex" value="0" id="m" checked/>男 
					<input type="radio" name="usersex" value="1" id="f" />女</td>
				</tr>
				<tr class="layui-form-item">
					<th class="layui-form-label">电话</th>
					<td><input type="text" id="usertel" name="usertel"
						class="layui-input-inline" /></td>
				</tr>
				<tr class="layui-form-item">
					<th class="layui-form-label">用户类型</th>
					<td><select type="text" id="userscale" name="userscale"
						class="layui-input-inline">
							<option value="0">管理员</option>
							<option value="1">普通用户</option>
					</select></td>
				</tr>
			</table>
		</form>
	</div>
	
	<div id="content_add" style="display: none">
		<form id="adduser">
			<table id="data_add" class="editorTable"
				style="margin: auto; margin-top: 50px; width: 80%;">
				<tr class="layui-form-item">
					<th class="layui-form-label">ID</th>
					<td><input type="text"  id="uid" name="uid" class="layui-input-inline" readonly="readonly"/></td>
				</tr>
				<tr class="layui-form-item">
					<th class="layui-form-label">用户名</th>
					<td><input type="text" id="userloginname" name="userloginname" class="layui-input-inline"/></td>
				</tr>
				<tr class="layui-form-item">
					<th class="layui-form-label">密码</th>
					<td><input type="text" id="userpassword" name="userpassword" class="layui-input-inline"/></td>
				</tr>
				<tr class="layui-form-item">
					<th class="layui-form-label">姓名</th>
					<td><input type="text" id="username" name="username"
						class="layui-input-inline" /></td>
				</tr>
				<tr class="layui-form-item">
					<th class="layui-form-label">性别</th>
					<td><input type="radio" name="usersex" value="0" id="m" checked/>男 
					<input type="radio" name="usersex" value="1" id="f" />女</td>
				</tr>
				<tr class="layui-form-item">
					<th class="layui-form-label">电话</th>
					<td><input type="text" id="usertel" name="usertel"
						class="layui-input-inline" /></td>
				</tr>
				<tr class="layui-form-item">
					<th class="layui-form-label">用户类型</th>
					<td><select type="text" id="userscale" name="userscale"
						class="layui-input-inline">
							<option value="1">普通用户</option>
							<option value="0">管理员</option>
					</select></td>
				</tr>
			</table>
		</form>
	</div>
	<script src="layui/layui.js"></script>
	<script>
		layui.use([ 'element', 'table', 'form', 'layer', 'jquery' ], function(
				element, table, form, layer, $) {		
			//展示已知数据
			table.render({
				elem : '#table',
				method : 'post',
				url : 'user/getCommonUsers',
// 				url : 'user/finduserdynamic',
				cellMinWidth : 80,
				cols : [ [ {
					field : 'userid', //对应Users类里的属性
					title : 'ID',
					sort : true
				}, {
					field : 'account',
					title : '用户名'
				}, {
					field : 'name',
					title : '姓名'
				} //这里的templet值是模板元素的选择器
				, {
					field : 'sex',
					title : '性别',
					templet: '#sexTpl'
				}, {
					field : 'telephone',
					title : '电话'
				}, {
					field : 'right',
					title : '操作',
					toolbar : '#barDemo'
				} ] ],
				skin : 'line' //表格风格
				,
				even : true,
				page : true //是否显示分页
				,
				limits : [ 5, 7, 10 ],
				limit : 5
			//每页默认显示的数量
			});

			//监听工具条
			table.on('tool(tableTool)', function(obj) { //注：tool是工具条事件名，tableTool是table原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				var tr = obj.tr; //获得当前行 tr 的DOM对象

				if (layEvent === 'detail') { //查看
					layer.msg('ID：' + data.account + '的查看操作');
				} else if (layEvent === 'del') { //删除
					//console.log("删除");
					layer.confirm('确认删除用户“' + data.account + '”？',
							function(index) {
								//do something
								$.ajax({
									type : "post",
									url : "user/deleteuser",
									dataType : 'json',
									data : "userid=" + data.userid,
									success : function(data) {//成功返回1
										if (data == 1) {
											obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
											layer.close(index);
											layer.msg('成功删除');
										} else {
											layer.msg('删除失败');
										}
									},
									error : function() {
										layer.msg('操作失败');
									}
								});
							});
				} else if (layEvent === 'edit') { //编辑
					$("#uid").val(data.userid);
					$("#userloginname").val(data.account);
					$("#username").val(data.name);
					if (data.sex == "0") {
						$("#m").prop("checked", "checked");
						$("#f").prop("checked", "");
					} else {
						$("#f").prop("checked", "checked");
						$("#m").prop("checked", "");
					}
					$("#usertel").val(data.telephone);
					$("#userscale").find("option[value = '" + data.scale + "']")
							.attr("selected", "selected");
					//do something
					layer.open({
						type : 1,
						title : "编辑用户",
						btn : [ '确定', '取消' ],//yes->添加==btn1->添加,btn2类推对应数组
						area : [ '400px', '400px' ],
						content : $("#content_update"),
						anim : 3,
						success : function() {
						},
						yes : function() {
							$.ajax({
								url : 'user/updateuser',
								type : 'post',
								dataType : 'text',
								data : $("#updateuser").serialize(),
								success : function(data) {
									if (data == 1) {
										layer.msg('修改成功');
										setTimeout(function(){ //延时1秒刷新页面
											location.reload(); 
										},1000);
									} else {
										layer.msg('修改失败');
									}
								}
							});
						}
					});
				}

			});
			
			//顶部重置
			$("#reset").on("click",function(){
				$("#account").val("");
			});
			
			//顶部查询
			$("#query").click(function() {
				table.render({
					elem : '#table',
					method : 'post',
	 				url : 'user/finduserdynamic',
					cellMinWidth : 80,
					cols : [ [ {
						field : 'userid',
						title : 'ID',
						sort : true
					}, {
						field : 'account',
						title : '用户名'
					}, {
						field : 'name',
						title : '姓名'
					} //这里的templet值是模板元素的选择器
					, {
						field : 'sex',
						title : '性别',
						templet: '#sexTpl'
					}, {
						field : 'telephone',
						title : '电话'
					}, {
						field : 'right',
						title : '操作',
						toolbar : '#barDemo'
					} ] ],
					where:{
						"account" : $("#account").val(),
						"sex" : $("#sex").val()
					},
					skin : 'line' //表格风格
					,
					even : true,
					page : true //是否显示分页
					,
					limits : [ 5, 7, 10 ],
					limit : 5
				//每页默认显示的数量
				});		
			});
			  
			//顶部新增
			$("#add").click(function() {
				$("#data_add tr:first").css("display","none");
				layer.open({
					type : 1,
					title : "添加用户",
					btn : [ '确定', '取消' ],//yes->添加==btn1->添加,btn2类推对应数组
					area : [ '450px', '450px' ],
					content : $("#content_add"),
					anim : 3,
					success : function() {
						$("#data_add input[type='text'],input[type='password']").val("");
					},
					yes : function() {
						$.ajax({
							url : 'user/adminadduser',
							type : 'post',
							dataType : 'text',
							data : $("#adduser").serialize(),
							success : function(data) {
								if (data == 1) {
									layer.msg('添加成功'); 
										setTimeout(function(){ //延时1秒刷新页面
											location.reload(); 
										},1000);
								} else {
									layer.msg('添加失败');
								}
							}
						});
						//display=none
					},
					end: function() {//无论是确认还是取消，只要层被销毁了，end都会执行
						$("#data tr:first").css("display","none");
					}
				});
			});
		});
	</script>
	<!-- tools -->
	<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
	
	<script type="text/html" id="sexTpl">
		{{# if (d.sex == '0') { }}   
  			男
		{{# } else if(d.sex == '1') { }}  
  			女
		{{# } else { }}  
  			保密
		{{# } }}
	</script>
</body>
</html>